<template>
  <div class="member_list">
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row style="width: 96.3%">
        <el-col :span="24">
          <!-- <el-input
            v-model="searchModel.search_key.planting_area_id"
            placeholder="树种id"
            clearable
            @change="getTreeList"
            @clear="searchModel.search_key.planting_area_id = ''"
          /> -->
          <el-input
            v-model="searchModel.search_key.name"
            placeholder="树种名称"
            clearable
            @change="getTreeList"
            @clear="searchModel.search_key.name = ''"
          />
          <el-input v-model="searchModel.search_key.memo" placeholder="备注" clearable @change="getTreeList" @clear="searchModel.search_key.memo = ''" />
          <el-input v-model="searchModel.search_key.sort" placeholder="排序" clearable @change="getTreeList" @clear="searchModel.search_key.sort = ''" />
          <el-select
            v-model="searchModel.search_key.status"
            placeholder="状态"
            clearable
            @change="getTreeList"
            @clear="searchModel.search_key.status = null"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="searchModel.search_key.type"
            placeholder="类型"
            clearable
            @change="getTreeList"
            @clear="searchModel.search_key.type = null"
          >
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="searchModel.search_key.created_at"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="创建开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="getTreeList"
          />
          <el-date-picker
            v-model="searchModel.search_key.updated_at"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="更新开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="getTreeList"
          />
          <el-button type="primary" icon="el-icon-search" @click="getTreeList"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" @click="clearSearchParams"
            >重置</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-search"
            @click="exportExcel"
            >导出</el-button
          >
        </el-col>
        <!-- <el-col :span="4" align="right">
          <el-button
            type="primary"
            icon="el-icon-plus"
            circle
            @click="openEditUI(null)"
          />
        </el-col> -->
      </el-row>
      <el-button
        style="position: absolute; right: 30px; top: 20px"
        type="primary"
        icon="el-icon-plus"
        circle
        @click="openEditUI(null)"
      />
    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <!-- <el-image
        style="width: 100px; height: 100px"
        :src="''"
        :preview-src-list="srcList"
      /> -->
      <el-table :data="treeList" stripe style="width: 100%">
        <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
            <!-- (page-1) * pageSize + index + 1 -->
            {{
              (searchModel.page - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="id" label="树种id" width="96" /> -->
        <!-- <el-table-column prop="name" label="名称" /> -->
        <el-table-column prop="name" label="树种名称" width="100" align="center">
          <!-- <template slot-scope="scope">
            <div>{{ scope.row.name }}</div>
          </template> -->
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.name"
              placement="top-start"
            >
              <div>{{ scope.row.name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="picture_path" label="图片" width="126" /> -->
        <el-table-column prop="picture_path" label="图片" width="100" align="center">
          <template slot-scope="scope">
            <!-- <el-tooltip effect="dark" :content="scope.row.name" placement="top-start"> -->
            <el-image
              v-if="scope.row.picture_path"
              style="width: 50px; height: 50px"
              :src="scope.row.picture_path"
              :preview-src-list="srcList"
              fit="fill"
            />

            <i v-else />
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <!-- width="220" -->
        <el-table-column prop="memo" label="备注" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.memo"
              placement="top-start"
            >
              <div>{{ scope.row.memo }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60" align="center" />
        <!-- <el-table-column prop="free_parking_expire_at" label="会员有效期" width="150" /> -->
        <el-table-column prop="status" label="启用状态" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">正常</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 0">实物</el-tag>
            <el-tag v-else-if="scope.row.type == 1" type="success">金额</el-tag>
            <el-tag v-else type="danger"> - </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="166" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.created_at"
              placement="top-start"
            >
              <div>{{ scope.row.created_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="updated_at" label="更新时间" width="166" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.updated_at"
              placement="top-start"
            >
              <div>{{ scope.row.updated_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="树种种植规格" width="126" fixed="right" align="center">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :content="scope.row.planting_tree_specification_count + '个树种种植规格'" placement="top-start">
              <span style="color: #1890ff;cursor: pointer;" @click="$router.push(`/tree/specList?id=${scope.row.id}`)">
                查看种植规格({{ scope.row.planting_tree_specification_count }})
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="90"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="openEditUI(scope.row.id)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="deleteTree(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="searchModel.page"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 用户信息编辑对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="clearForm"
    >
      <el-form ref="treeFormRef" :model="treeForm" :rules="rules">
        <el-form-item
          label="树种名称"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input v-model="treeForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="treeForm.memo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="treeForm.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" :label-width="formLabelWidth">
          <!-- <el-switch
            v-model="treeForm.status"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus"
          /> -->
          <el-radio-group v-model="treeForm.type">
            <el-radio :label="0">实物 </el-radio>
            <el-radio :label="1">金额</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="启用状态" :label-width="formLabelWidth">
          <!-- <el-switch
            v-model="treeForm.status"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus"
          /> -->
          <el-radio-group v-model="treeForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用 </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- http://tree-planting.dgsxczxcjh.org.cn/api/base/uploadPicture -->
        <!-- action="http://tree-planting.dgsxczxcjh.org.cn/image/" -->
        <!-- action="http://tree-planting.dgsxczxcjh.org.cn/api/base/uploadPicture" -->
        <!-- action="" -->
        <el-form-item
          label="树种图片"
          prop="free_parking_expire_at"
          :label-width="formLabelWidth"
        >
          <el-upload
            action="/api/base/uploadPicture"
            :http-request="upload"
            class="avatar-uploader"
            :headers="{
              'Content-Type': 'multipart/form-data',
            }"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            list-type="picture-card"
          >
            <img
              style="width:100%;height:100%"
              v-if="treeForm.picture_path"
              :src="treeForm.picture_path"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTree">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 车牌号 -->
  </div>
</template>

<script>
import treeApi from "@/api/treeList";
import exportUtil from "@/excel/ExportExcel";

export default {
  data() {
    const checkaccount = (rule, value, callback) => {
      var reg =
        /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
      if (!reg.test(value)) {
        return callback(new Error("邮箱格式错误"));
      }
      callback();
    };
    return {
      dialogImageUrl: "",
      picture_data: {},
      fileList: [],
      imageUrl: "",
      uploading: false, // 上传状态
      file: null, // 存储选择的文件对象
      dialogVisible: false,
      disabled: false,
      carList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒0毫秒
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              start.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒0毫秒
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              start.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒0毫秒
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      types: [
        {
          value: 1,
          label: "金额",
        },
        {
          value: 0,
          label: "实物",
        },
      ],
      status: [
        {
          value: 1,
          label: "启用",
        },
        {
          value: 0,
          label: "禁用",
        },
      ],
      formLabelWidth: "130px",
      beforeStatus: null,
      treeForm: {},
      mytreeForm: {},
      dialogFormVisible: false,
      title: "",
      total: 0,
      searchModel: {
        page: 1,
        pageSize: 10,
        search_key: {},
      },
      treeList: [],
      srcList: [],
      rules: {
        name: [
          { required: true, message: "请输入树种名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请选择类型", trigger: "blur" },
          // { validator: checkaccount, trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { validator: checkaccount, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getTreeList();
  },
  methods: {
    handleDownload(file) {
      // console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList, "handleRemove--");
    },
    handlePreview(file) {
      console.log(file, "handlePreview--");
    },
    handleExceed(files, fileList) {
      console.log(files, "handleExceed--");
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      console.log(file, "beforeRemove--");
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      // 检查是否已经有上传的图片，如果有，则清空 fileList
      console.log(file, "file--");
      if (this.fileList.length > 0) {
        this.fileList = [];
      }
      // 添加上传的文件到文件列表中
      this.fileList.push(file);
      return false; // 阻止自动上传
    },
    customUpload(file) {
      // 创建 FormData 对象
      const formData = new FormData();
      formData.append("picture", file);
      console.log(formData, "formData---");
      // 发送请求
      return this.$http.post(
        "http://tree-planting.dgsxczxcjh.org.cn/api/base/uploadPicture",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );
    },
    handleSuccess(response, file, fileList) {
      // 处理上传成功的回调
      if (response && response.data && response.data.picture_path) {
        // console.log(response.data.picture_path, "path------");
        this.treeForm.picture_path = response.data.picture_path;
        this.$message.success("上传成功");
      } else {
        this.$message.error("上传失败");
      }
    },
    // 图片上传
    upload(file) {
      // const data = new FormData();
      const reader = new FileReader();
      reader.onload = (e) => {
        this.treeForm.picture_path = e.target.result;
      };
      reader.readAsDataURL(file.file);
      // console.log(file, "file");
      // console.log(file.file, "file.file");
      // data.append("picture", file.file);
      this.picture_data = file;
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      // console.log(file, "file");
      this.treeForm.picture_path = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // console.log(file, "file---");
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片不是 JPG/PNG 格式!");
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("上传图片大小不建议超过 2MB!");
      }
      if (isJPG || (isPNG && isLt2M)) {
        this.file = file; // 存储选择的文件对象，供自定义上传方法使用
        return true;
      }
      return false;
    },
    // beforeAvatarUpload(file) {
    //   console.log(file, 'file---');
    //   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG或png 格式!');
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!');
    //   }
    //   return isJPG && isLt2M;
    // },
    open(id) {
      // 请求
      treeApi.getCarList(id).then((res) => {
        // console.log(res.data);
        // const arr = res.data.map((item) => item.plate_number)
        // const html =
        this.carList = res.data;
        this.dialogVisible = true;
        // this.$alert(arr.join('、'), '历史车牌号', {
        //   confirmButtonText: '确定',
        //   callback: action => {
        //     // this.$message({
        //     //   type: 'info',
        //     //   message: `action: ${ action }`
        //     // });
        //   }
        // })
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 导出
    exportExcel() {
      require.ensure([], () => {
        const fieldName = [
          "序号",
          "树种名称",
          "图片",
          "备注",
          "启用状态",
          "类型",
          "树种规格个数",
          "创建时间",
          "更新时间",
        ];
        const filterVal = [
          "index",
          "name",
          "picture_path",
          "memo",
          "status",
          "type",
          "planting_tree_specification_count",
          "created_at",
          "updated_at",
        ];
        // const data = this.treeList.map(v => filterVal.map(j => v[j]));
        const data = this.treeList.map((v, i) =>
          filterVal.map((j) => {
            if (j === "index") {
              return i;
            } else if (j === "type") {
              return v[j] === 0 ? "实物" : v[j] === 1 ? "金额" : "-";
            } else if (j === "status") {
              return v[j] === 0 ? "禁用" : "正常";
            } else {
              return v[j];
            }
          })
        );
        const item = this.treeList[0];
        // console.log(fieldName, data, `${item.name}`);
        exportUtil.export_json_to_excel(
          fieldName,
          data,
          `${item.name} - ${new Date().toLocaleString().replaceAll("/", "-")}`
        );
        // exportUtil.export_json_to_excel(fieldName, data, `${item.name} - ${new Date().toLocaleDateString().replaceAll('/', '-')}`);
      });
    },
    // 修改启用状态
    changeStatus(e) {
      // console.log(e, "status");
      // 确认吗
    },
    deleteTree(tree) {
      this.$confirm(`您确认删除树种 ${tree.name} ?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(11);
          treeApi.deleteTreeById(tree.id).then((response) => {
            this.$message({
              type: "success",
              message: "删除成功" || response.msg,
            });
            this.getTreeList();
          });
        })
        .catch(() => {
          console.log(22);
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    saveTree() {
      // 触发表单验证
      this.$refs.treeFormRef.validate((valid) => {
        if (valid) {
          // 提交请求给后台
          const data = new FormData();
          data.append("picture", this.picture_data.file);
          console.log(this.picture_data.file, 'this.picture_data.file');
          // console.log(data, 'data');
          // return
          if (!this.picture_data.file) {
            this.submit();
          } else {
            treeApi
              .uploadPicture(data)
              .then((res) => {
                console.log("res", res);
                if (res.code === 0) {
                  var path_arr = res.data.picture_path;
                  this.treeForm.picture_path =
                    "http://tree-planting.dgsxczxcjh.org.cn/image/" + path_arr;
                } else {
                  this.$message.error("上传失败");
                }
                this.submit();
                this.picture_data.file = ""
              })
              .catch(() => {
                setTimeout(() => {
                  this.submit();
                  this.picture_data.file = ""
                }, 300);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加或修改请求
    submit() {
      // 修改
      if (this.treeForm.id) {
        // 保存
        if (this.beforeStatus && !this.treeForm.status) {
          this.$confirm('禁用< ' + this.treeForm.name + '>树种将取消勾选"种植区域下"所有绑定了<' + this.treeForm.name + '>该可用树种, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // this.$message({
            //   type: 'success',
            //   message: '删除成功!'
            // });
            treeApi.updateTree(this.treeForm).then((response) => {
              // 成功提示
              this.$message({
                message: "保存成功",
                type: "success",
              });
              // 关闭对话框
              this.dialogFormVisible = false;
              // 刷新表格
              this.getTreeList();
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        } else {
          treeApi.updateTree(this.treeForm).then((response) => {
            // 成功提示
            this.$message({
              message: "保存成功",
              type: "success",
            });
            // 关闭对话框
            this.dialogFormVisible = false;
            // 刷新表格
            this.getTreeList();
          });
        }
      } else {
        // 添加
        // 保存
        treeApi.addTree(this.treeForm).then((response) => {
          // 成功提示
          this.$message({
            message: "添加成功",
            type: "success",
          });
          // 关闭对话框
          this.dialogFormVisible = false;
          // 刷新表格
          this.getTreeList();
        });
      }
    },
    clearForm() {
      this.treeForm = {};
      this.$refs.treeFormRef.clearValidate();
    },
    openEditUI(id) {
      if (id == null) {
        this.title = "新增树种";
        // var path_arr = "bNoCRiiqVSruXb8VJuZpsfsuIcNKrkuecjJ9BFLb.png"
        // this.treeForm.picture_path =
        // "http://tree-planting.dgsxczxcjh.org.cn/image/" +
        // path_arr;
        this.treeForm = {
          status: 1,
          type: 0
        };
      } else {
        this.title = "修改树种";
        // 根据id查询用户数据
        // 根据分页筛选
        const item = { ...this.treeList.filter((item) => item.id === id)[0] };
        this.treeForm = item;
        this.beforeStatus = item.status
      }
      this.dialogFormVisible = true;
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getTreeList();
    },
    handleCurrentChange(page) {
      this.searchModel.page = page;
      this.getTreeList();
    },
    getTreeList() {
      console.log(111);
      treeApi.getTreeList(this.searchModel).then((response) => {
        //
        this.treeList = response.data.data;
        this.total = response.data.total;
        // 图片数组
        this.srcList = response.data.data.map(item => item.picture_path)
        // console.log(this.srcList, 'srcList');
      });
    },
    // 重置
    clearSearchParams() {
      this.searchModel = {
        page: 1,
        pageSize: 10,
        search_key: {},
      };
      this.getTreeList();
    },
  },
};
</script>

<style lang="scss" scoped>
.carItem {
  margin-bottom: 12px;

  div {
    margin-bottom: 4px;

    span {
      width: 76px;
      display: inline-block;
    }
  }
}

.member_list {
  .el-table__row .el-table__cell,
  .el-tooltip,
  .el-button .cell {
    white-space: nowrap;
    /* width: 50px; */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 显示省略号 */
  }
}

/* #search {
  display: flex;
  flex-wrap: wrap;
  .el-input {
    width: 200px;
    margin-right: 15px;
    margin-bottom: 10px;
  }
  .el-date-editor {
    margin-bottom: 12px;
  }
}
 */

#search {
  display: flex;
  flex-wrap: wrap;

  .el-input {
    width: 190px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .el-select {
    margin-right: 10px;
  }

  .el-date-editor {
    margin-right: 12px;
    margin-bottom: 10px;
  }
}

.el-dialog .el-input {
  width: 75%;
}
</style>
